<template>
  <a-modal
    :maskClosable="maskClosable"
    title="同步应用资源"
    :width="600"
    :visible="visible"
    :confirm-loading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭"
  >
    <a-spin :spinning="confirmLoading">
      <a-form :labelCol="{ span: 6 }" :wrapperCol="{ span: 14 }" :form="form">
        <a-form-item label="数据中心">
          <a-select
            :getPopupContainer="
              (triggerNode) => {
                return triggerNode.parentNode || document.body;
              }
            "
            v-decorator="['datacenterId', decoratorOptions.datacenterId]"
            @change="handleChange"
          >
            <a-select-option
              v-for="d in datacenterList"
              :key="d.id"
              :value="d.id"
            >
              {{ d.name }}
            </a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item label="云平台资源">
          <a-select
            :getPopupContainer="
              (triggerNode) => {
                return triggerNode.parentNode || document.body;
              }
            "
            v-decorator="['resourceId', decoratorOptions.resourceId]"
          >
            <a-select-option
              v-for="(item, index) in resourceList"
              :key="'resourceId_' + index"
              :value="item.id"
            >
              {{ item.name }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <!-- <template v-if="spType === 'k8s'"> -->
        <a-form-item label="应用资源" :wrapperCol="{ span: 18 }">
          <a-checkbox-group
            :options="options"
            v-decorator="['checkedList', decoratorOptions.checkedList]"
          />
          <!-- <a-checkbox-group
            v-decorator="['checkedList', decoratorOptions.checkedList]"
          >
            <a-row :gutter="[10, 10]" style="margin: 0">
              <a-col v-for="d in appList" :key="d.id" :span="24">
                <a-checkbox :value="d.id">
                  <a-tooltip :title="d.name">
                    <span>{{ setCheckboxText(d.name) }}</span>
                  </a-tooltip>
                  {{ d.name }}
                </a-checkbox>
              </a-col>
            </a-row>
          </a-checkbox-group> -->
        </a-form-item>
        <!-- </template> -->
      </a-form>
    </a-spin>
  </a-modal>
</template>
<script>
import { getAction, postAction, gPostAction } from "@/api/manage";
export default {
  name: "SyncModal",
  data() {
    return {
      visible: false,
      confirmLoading: false,
      form: this.$form.createForm(this),
      resourceList: [],
      decoratorOptions: {
        resourceId: {
          rules: [{ required: true, message: "请选择云平台资源" }],
        },
        datacenterId: {
          rules: [{ required: true, message: "请选择数据中心" }],
        },
        checkedList: {
          initialValue: [],
          rules: [
            {
              required: true,
              message: "请选择应用资源",
            },
          ],
        },
      },
      options: [],
      // spType: "",
      datacenterList: [],
      appList: [],
      maskClosable: false,
    };
  },
  methods: {
    setCheckboxText(text) {
      if (text && text.length && text.length > 15) {
        return text.substring(0, 10) + "...";
      }
      return text;
    },
    sync() {
      this.visible = true;
      this.form.resetFields();
      this.appList = [];
      this.loadDatacenterList();
      // this.loadResourceList();
    },
    loadDatacenterList() {
      gPostAction("/asset/pageDatacenter", { pageSize: 99 }).then((res) => {
        this.datacenterList = res.data.list;
        if (this.datacenterList && this.datacenterList.length) {
          const item = this.datacenterList[0];
          // this.form.setFieldsValue({
          //   clusterId: item.clusterId,
          // });
          // this.spType = item.spType;

          this.form.setFieldsValue({
            datacenterId: item.id,
          });
          this.loadResourceList(item.id);
          this.loadNamespacesList(item.id);
        }
      });
    },
    loadResourceList(id) {
      this.form.setFieldsValue({
        resourceId: "",
      });

      const postData = {
        pageSize: 99,
        datacenterId: id,
      };

      gPostAction("/cloud_resource/page", postData).then((res) => {
        if (res.success) {
          this.resourceList = res.data.list;
        }
      });
    },
    loadNamespacesList(id) {
      // if (this.spType === "k8s") {
      this.appList = [];
      this.options = [];
      getAction("/app/queryNamespaceList", { datacenterId: id }).then((res) => {
        if (res.success && res.data) {
          this.appList = res.data;
          res.data.forEach((d) => {
            this.options.push({
              label: d.name,
              value: d.id,
            });
          });
        }
      });
      // }
    },
    handleChange(value) {
      if (value) {
        this.loadResourceList(value);
        this.loadNamespacesList(value);
      }
    },
    handleOk(e) {
      this.form.validateFields((err, values) => {
        if (!err) {
          this.confirmLoading = true;

          const postData = {
            cloudResourceId: values.resourceId,
            // clusterId: values.clusterId,
            appIds: values.checkedList,
          };
          postAction("/app/sync", postData, null, {
            "Content-Type": "application/json;charset=UTF-8",
          })
            .then((res) => {
              if (res.success) {
                this.$message.success("操作成功");
                this.$emit("ok");
              }
            })
            .finally(() => {
              this.handleCancel();
            });
        }
      });
    },
    handleCancel() {
      this.visible = false;
      this.confirmLoading = false;
    },
  },
};
</script>
